<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>语音咨询-对话页</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/font-awesome-4.3.0/css/font-awesome.min.css" />
		<link href="../css/config.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
		<link href="../css/circle.css" rel="stylesheet" />
		<style>
		body{
			background:#efefef;
		}
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px;
				background-color: #fafafa;
				z-index:100;
			}
			
			footer .mui-icon {
				color: #000;
			}
			
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			
			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);*/
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}
			
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			
			footer .mui-icon {
				color: #000;
			}
			
			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}
			
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			
			#msg-sound {
				-webkit-user-select: none !important;
				user-select: none !important;
			}
			
			.footer-center .input-sound {
				background-color: #eee;
			}
			
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			
			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav km-navbar white-header" style="box-shadow:none;">
			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
			<h1 id="title" class="mui-title km-view-title">王医生-语音咨询</h1>
		</header>
		<div class="mui-content mui-fullscreen mui-scroll-wrapper" style="background:#efefef;">
			<div class="mui-scroll">
				<div class="chat-pop other-part">
					<img src="../img/example1.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span> 消息消息消息消息
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span> 消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息消息
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
				<div class="chat-pop my-part">
					<img src="../img/example2.png" class="head-img" />
					<div class="content">
						<span class="triangle"></span>
						<img src="../img/example6.png" />
					</div>
					<p class="time">2016-01-23&nbsp;11:11</p>
				</div>
			</div>
		</div>
		<footer>
			<div class="footer-left">
				<i id="msg-image" class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div>
			<div class="footer-center">
				<textarea id="msg-text" type="text" class="input-text"></textarea>
				<button id="msg-sound" type="button" class="input-sound" style="display: none;">按住说话</button>
			</div>
			<label for="" class="footer-right">
				<i id="msg-type" class="mui-icon mui-icon-mic"></i>
			</label>
		</footer>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/Global.js"></script>
	<script>
		mui.init({
			swipeBack: true,
			statusBarBackground: '#f7f7f7',
			statusBarStyle: 'UIStatusBarStyleDefault'
		});
		mui('.mui-scroll-wrapper').scroll();
	</script>

</html>